<template>
	<view>
		<view class="tab">
			<view class="tab-item tab-ac">密码登录</view>
			<!-- <view class="tab-line"></view>
			<view class="tab-item" @click="toQrLogin">验证码登录</view> -->
		</view>
		<view class="form">
			<view class="form-item">
				<view class="form-item-label">手机号码</view>
				<view class="form-item-input">
					<input type="number" placeholder="请输入手机号" placeholder-class="form-item-input-ac" v-model="form.phone">
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">密码</view>
				<view class="form-item-input">
					<input type="password" placeholder="请输入密码" placeholder-class="form-item-input-ac" v-model="form.password">
				</view>
			</view>
		</view>
		<view class="footer flex-sp">
			<view class="footer-l">
				没有账号？ <text @click="toLogin">去注册</text>
			</view>
			<view class="footer-r">忘记密码？</view>
		</view>
		<view class="btns flex-center" @click="submit">
			<image :src="mixiImgUrl + '/static/anniu.png'" mode=""></image>
			<view class="flex-center">确认进入家谱管理</view>
		</view>
		<btnlogin :zheshow='zheshow' ref="btnlogin" @submit="submit" />
	</view>
</template>

<script>
	import {loginPhoneHttp} from '@/common/http/api.js'
	import btnlogin from '@/components/login/butlogin.vue';
	export default {
		components: {
			btnlogin
		},
		data(){
			return {
				code: '',
				form: {
					phone: '',
					password: ''
				}
			}
		},
		onLoad() {
			
		},
		methods:{
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/qrLogin'
				})
			},
			open() {
				// if (this.checked === false) {
				// 	uni.showToast({
				// 		title: '请仔细阅读并勾选隐私协议！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.$refs.btnlogin.show()
			},
			toQrLogin(){
				uni.navigateTo({
					url:'/pages/login/qrLogin'
				})
			},
			submit(userInfo){
				// uni.login({
				// 	provider: 'weixin',
				// 	success: loginRes => {
				// 		console.log(loginRes);
				// 		let data = {
				// 			code: loginRes.code,
				// 			userInfo
				// 		}
				// 		uni.showLoading()
				// 		loginHttp(data).then(res => {
				// 			uni.setStorageSync("token", res.data.token)
				// 			uni.setStorageSync("userInfo", res.data.userInfo)
				// 			uni.reLaunch({
				// 				url: '/pages/index/index'
				// 			})
				// 		})
				// 	}
				// });
				if(this.form.phone === '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if(this.form.password === '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				loginPhoneHttp(this.form).then(res=>{
					uni.hideLoading()
					uni.setStorageSync("token", res.data.token)
					uni.setStorageSync("userInfo", res.data.userInfo)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}
	.tab {
		padding: 0 84rpx;
		padding-top: 70rpx;
		width: 100%;
		box-sizing: border-box;
		
		display: flex;
		align-items: center;
		.tab-item {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
		}
		.tab-line {
			width: 3rpx;
			height: 41rpx;
			background: #333333;
			border-radius: 2rpx;
			margin: 0 46rpx;
		}
		.tab-ac {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 40rpx;
			color: #84643B;
		}
	}
	.form {
		
		width: 100%;
		box-sizing: border-box;
		padding: 0 84rpx;
		padding-top: 115rpx;
		.form-item {
			width: 100%;
			margin-bottom: 70rpx;
			.form-item-label {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 70rpx;
			}
			.form-item-input {
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E5DCC9;
				input {
					width: 100%;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
				}
				.form-item-input-ac {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #BBBBBB;
				}
			}
		}
		.form-item:last-child {
			margin-bottom: 0;
		}
	}
	.footer {
		width: 100%;
		box-sizing: border-box;
		padding: 0 84rpx;
		padding-top: 31rpx;
		.footer-l {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text {
				color:#84643B;
			}
		}
		.footer-r {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.btns {
		width: 100%;
		box-sizing: border-box;
		padding: 0 84rpx;
		margin-top: 142rpx;
		position: relative;
		height: 109rpx;
		view {
			width: 100%;
			height: 100%;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
</style>